<template>
    <div class="main_container">
        <div>
            <el-row :gutter="16" class="mb8">
                <el-col :span="1.5">
                    <el-button
                    class="btn_primary_color"
                    icon="el-icon-plus"
                    size="small"
                    @click="handleAdd"
                    v-hasPermi="['add_price_level']"
                    >新增价格等级</el-button>
                </el-col>
            </el-row>

            <el-table border :data="levelLists" style="margin-top: 15px;">
                <el-table-column label="序号" width="80" align="center" prop="index" />
                <el-table-column label="价格等级名称" align="center" prop="price_name" />
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <span :style="{color: scope.row.is_start?'#333':'red'}">{{ scope.row.statusName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['edit_price_level']"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            :disabled="scope.row.is_system"
                            @click="handleStatus(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['status_price_level']"
                        >{{ scope.row.is_start?'停用':'启用' }}</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            :disabled="scope.row.is_system"
                            @click="handleRemove(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['remove_price_level']"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新增 -->
        <el-dialog class="role_dialog" destroy-on-close center :visible.sync="showAddLevel" 
            :title="dialogTitle" width="30%" append-to-body>
            <el-row>
                <el-form ref="addForm" :model="addForm" size="small" :rules="rules" label-width="auto">
                    <el-col :span="12">
                        <el-form-item label="价格等级名称：" prop="price_name">
                            <el-input style="width: 240px;" maxlength="100" v-model="addForm.price_name" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="showAddLevel=false">取 消</el-button>
                <el-button size="small" class="btn_primary_color" @click="editLevelCommit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getPriceLevel, addPriceLevel, editPriceLevel, stopPriceLevel,
    startPriceLevel, removePriceLevel } from '@/api/product';

export default {
    name: 'priceLevel',
    data() {
        return {
            showAddLevel: false,
            corp_id: '',
            editId: null, 
            levelLists: [],
            dialogTitle: '',
            addForm: {
                price_name: ''
            },
            rules:{
                price_name: [
                    { required: true, message: "请输入价格等级名称", trigger: "blur" },
                ],
            }
        }
    },
    created() {
        this.corp_id = this.$store.state.corpId
        this.getPriceLevels()
    },
    methods: {
        // 角色列表
        getPriceLevels() {
            getPriceLevel({corp: this.corp_id}).then(res => {
                this.levelLists = res.data.data.level_list.filter((item, index) => {
                    item.index = index+1
                    item.statusName = item.is_start?'启用中':'已停用'
                    return item
                })
            })
        },
        // 新增
        handleAdd() {
            this.editId = null
            this.dialogTitle = '新增价格等级'
            this.showAddLevel = true
        },
        // 编辑
        handleEdit(item) {
            this.dialogTitle = '编辑价格等级'
            this.editId = item.id
            this.addForm.price_name = item.price_name
            this.showAddLevel = true
        },
        editLevelCommit() {
            var that = this
            that.$refs['addForm'].validate(valid => {
                if(!valid) return

                let temp = null
                that.addForm.corp = that.corp_id
                if (that.editId) {
                    temp = editPriceLevel(that.editId, that.addForm)
                }else{
                    temp = addPriceLevel(that.addForm)
                }
                temp.then(res => {
                    if (res.code == 200){
                        that.addForm.price_name = ''
                        that.getPriceLevels()
                        that.showAddLevel = false
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                    }
                })
            })
        },
        // 删除
        handleRemove(item) {
            let that = this
            this.$confirm('您确定要删除该价格等级吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removePriceLevel(item.id, {
                    corp: that.corp_id
                }).then(res => {
                    if (res.code == 200){
                        that.getPriceLevels()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
        // 停用、启用
        handleStatus(item) {
            let temp = null
            if (item.is_start){
                temp = stopPriceLevel(item.id, {corp: this.corp_id})
            }else {
                temp = startPriceLevel(item.id, {corp: this.corp_id})
            }
            temp.then(res => {
                if (res.code == 200){
                    this.getPriceLevels()
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';

</style>